<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="tcl.ico">
    <title>LCD</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <link rel="stylesheet" href="./lcdBootStrapTable.css">
    <style>
        thead {
            display: none !important;
        }

        body {
            padding: 0 20px;
        }
    </style>
</head>
<body style="background-color: black;">
    <img src="./m6Logo.png" style="width: 15vw" alt="">
    <div id="text">

    </div>
    <table id="table" class="table table-striped" style="font-size: 60px;line-height: 80px;color: white;font-weight:bolder">
    </table>
    <script>
        let baseUrl = 'http://10.45.216.190:8889'
        //baseUrl = 'http://127.0.0.1:8889'
        let lcdNameSelect = 'CJRCV100'
        let url = `${baseUrl}/Lcd/GetLcdMsgH5?lcdName=${lcdNameSelect}`;
        let timer = setInterval(() => {
            $('#table').bootstrapTable({
                url,
                columns: [{
                    field: 'key',
                    title: 'key'
                }, {
                    field: 'value',
                    title: 'value'
                }],
            })
            $("#table").bootstrapTable('refresh', { url, silent: true });
        }, 1000);
    </script>
    <script src="./jquery-3.3.1.js"></script>
    <script src="./bootstrap.min.js"></script>
    <script src="./bootstrap-table.min.js"></script>
</body>
</html>